import React, { PureComponent } from 'react';
import { DetailActor } from '../styled';

class DetailActors extends PureComponent {
  render() {
    let { actors } = this.props.data;
    return (
      <DetailActor>
        <div className='actor-title'>演职人员</div>
        <div className='actors-warper'>
          <ul>
            {
              actors?actors.map(el => {
                return <li style={{display:'block'}} key={el.name}>
                <div style={{overflow:'hidden'}}>
                  <div style={{width:'0.85rem',height:'0.85rem'}}></div>
                  <div style={{position:'absolute',top:'0',width:'0.85rem',height:'0.85rem',overflow:'hidden'}}>
                    <img src={el.avatarAddress} alt="" />
                  </div>
                </div>
                <span style={{ paddingTop: '0.1rem' }}>{ el.name }</span>
                <span style={{ paddingTop: '0.05rem',color:'#ababab' }}>{ el.role }</span>
              </li>
              }):<></>
            }
          </ul>
        </div>
      </DetailActor>
    );
  }
}

export default DetailActors;